<template>
  <div id="main">
    <el-menu class="menu-nav" mode="horizontal" theme="dark" :default-active="activeIndex" :active="activeIndex" :router="rout" @select="selectItems">
      <el-menu-item index="/" class="fashion">个性推荐</el-menu-item>
      <el-menu-item index="/songlist" class="songlist">歌单</el-menu-item>
      <el-menu-item index="/ranking" class="rankinglist">排行榜</el-menu-item>
      <el-menu-item index="4">热门歌手</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      activeIndex: "/",
      rout: true
    }
  },
  methods: {
    getNavType() {
      this.activeIndex = this.$store.state.admintop;
      //store.state.admintop
    },
    selectItems(index) {
      this.$store.state.admintop = index;
      //按钮选中之后设置当前的index为store里的值
    }
  },
  watch: {
    //监测store.state
    '$store.state.admintop': 'getNavType'
  }
}
</script>

<style>
#main {
  width: 100%;
  position: relative;
  background: #FFFFFF;
}

.menu {
  width: 70%;
  margin: 0 auto;
}

#main .menu-nav {
  width: 350px;
  background: #FFFFFF;
  margin: 0 auto;
}

#main .menu-nav .el-menu-item {
  position: relative;
  display: inline-block;
}

.el-menu--dark .el-menu-item,
.el-menu--dark .el-submenu__title {
  color: #000000;
}

.el-menu--horizontal.el-menu--dark .el-menu-item:hover,
.el-menu--horizontal.el-menu--dark .el-submenu__title:hover {
  background-color: #FFFFFF;
  color: #FF0000;
  border-bottom: 5px solid #FF0000;
}

.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active,
.el-menu-item.is-active {
  background-color: #FFFFFF;
  color: #FF0000;
  border-bottom: 5px solid #FF0000;
}

.router-link-active,
.router-link-exact-active,
.link {
  text-decoration: none;
}
</style>